<template>
    <div class="login-container">
        <div class="login-box">
            <!--  头像区域  -->
            <div class="avatar-box">
                <img src="../assets/logo.png" alt="">
            </div>

            <!--  内容区域  -->
            <el-form ref="form" class="login-form" :rules="rules" :model="loginInfo">
                <el-form-item prop="username">
                    <el-input v-model="loginInfo.username" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginInfo.password" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return {
                loginInfo:{
                    username:'admin',
                    password:'123456'
                },
                rules:{
                    username:[
                        {required:true, message:'请输入用户名',trigger:'blur'},
                        {min:3, max:10, message:'长度在3-10个字符之间',trigger:'blur'}
                    ],
                    password:[
                        {required:true, message:'请输入密码',trigger:'blur'},
                        {min:6, max:15, message:'长度在6-15个字符之间',trigger:'blur'}
                    ]
                }
            }
        },
        methods:{
            login(){
                this.$refs.form.validate(
                    // async / await 处理异步事件
                    async result =>{
                        if(result){
                            // 这里用到了 解构赋值
                            const {data}= await this.$http.post('login',this.loginInfo);
                            console.log(data);
                            if(data.meta.status !== 200){
                                this.$message.error('登录失败');  //这里用到了 Element-UI 中的 message
                            }else{
                                this.$message.success('登录成功');
                                // 把 token 保存到 sessionStorage 中
                                window.sessionStorage.setItem('token',data.data.token);
                                await this.$router.push('/home');
                            }
                        }
                    }
                )
            },
            reset(){
                this.$refs.form.resetFields();
            }
        }
    }
</script>

<style lang="less">
    .login-container {
        background-color: #2d4d6b;
        height: 100%;
    }

    .login-box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
    }

    .avatar-box {
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        background-color: #fff;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }
    .btns{
        display: flex;
        justify-content: flex-end;
    }
    .login-form{
        box-sizing: border-box;   // css3 的盒子模型，padding 不会撑大盒子
        position: absolute;
        padding: 0 20px;
        width: 100%;
        bottom: 0;
    }
    .el-icon-user-solid:before{
        font-size: 20px;
        margin-left: 10px;
    }
    .el-icon-lock:before{
        font-size: 20px;
        margin-left: 10px;
    }
    .el-input--prefix .el-input__inner {
        padding-left: 42px;
    }
</style>